<script setup>
<<<<<<< HEAD
import {computed,ref,onMounted} from "vue";
=======
import {computed,ref,onMounted,watch} from "vue";
>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
import request from '../../utils/request';
import { ElMessage, ElMessageBox } from 'element-plus'
const honeyUser = JSON.parse(localStorage.getItem('happyuser') || '{}');
const username = ref('');
const tableData = ref([]);
const pageNum = ref(1);
const pageSize = ref(8);
const total = ref(0);
const user = computed(() => {
  return JSON.parse(localStorage.getItem('xm-user') || '{}');
});
const fromVisible = ref(false);
let form = ref({}); 
const ids = ref([]);
const url = ref('http://localhost:5173/');
const load = () => { 
// 分页查询
 request.get('/users/selectByPage', {
        params: {
          pageNum: pageNum.value,
          pageSize: pageSize.value,
          userName: username.value,
<<<<<<< HEAD
=======
          
>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
        }
      }).then((res) => {
        
        tableData.value = res.data.data.records;
        total.value = res.data.data.total;
        console.log(tableData.value);
      })
}
load()

const handleAdd = () => {
  form.value = {}; // 清空数据
  fromVisible.value = true; // 打开弹窗
};
function handleAvatarSuccess(response) {
  form.value.avatar = response.data;
}
<<<<<<< HEAD
=======

>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
const save = () => {
   request({
    url: form.value.id ? '/users/update' : '/users/add',
    method: form.value.id ? 'put' : 'post', // 根据id是否存在来判断是put还是post
    data: form.value
   }).then((res) => {
    if(res.data.code == 200){
      ElMessage({
      message: '操作成功',
      type: 'success',
     })
      
      load();
      fromVisible.value = false
    }else{
      ElMessage.error(res.data.msg)
    } 
})
}

// 处理多选表格的选择变化事件
function handleSelectionChange(rows) {
ids.value = rows.map(v => v.id);
}
// 定义handleEdit
function handleEdit(row) {
  // 使用JSON.parse(JSON.stringify())深拷贝数据
  form.value = JSON.parse(JSON.stringify(row));
  fromVisible.value = true;
}

const handleDelete = (id) => {
  ElMessageBox.confirm('是否删除该条数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // tableData.value.splice(index, 1); // 删除指定索引的数据
    request.delete('/users/delete/'+id).then((res) => {
        if(res.data.code == 200){
          ElMessage.success('操作成功')
          load();
        }else{
          ElMessage.error(res.msg)
        }
    })
    ElMessage({
      type: 'success',
      message: '删除成功!'
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};
const delBatch = () => {
    if (ids.value.length === 0) {
        ElMessage.warning('请先选择要删除的数据');
        return;
   }
    ElMessageBox.confirm('是否删除所选的所有数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // tableData.value.splice(index, 1); // 删除指定索引的数据
    request.delete('/users/delete/batch',{
        data: ids.value,
        method: 'delete',
    }
    ).then((res) => {
        console.log(ids.value)
        if(res.data.code == 200){
          ElMessage.success('操作成功')
          load();
           // 清空选中行ID
           ids.value = [];
        }else{
          ElMessage.error(res.msg)
        }
    })
    ElMessage({
      type: 'success',
      message: '删除成功!'
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
}
<<<<<<< HEAD
</script>

<template>
  <div class="main" style=" width: 100%; padding: 25px;background: linear-gradient(to top,white 0%,white 15%,#DCDCDC 85%,#DCDCDC 100%);
=======
watch(username, (newValue, oldValue) => {
  console.log('searchValue changed', newValue, oldValue);
  if (! username.value) {
    load();
  } 
});
</script>

<template>
  <div class="main" style="padding: 25px;background: linear-gradient(to top,white 0%,white 15%,#DCDCDC 85%,#DCDCDC 100%);
>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
">

  <div class="search">
      <el-input placeholder="请输入账号查询" style="width: 200px" v-model="username"></el-input>
      <el-button type="info" plain style="margin-left: 10px" @click="load">查询</el-button>
      <el-button type="primary" plain @click="handleAdd">新增</el-button>
      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
    </div>

<!-- <div class="operation">
      
</div> -->
    
    <div class="table" >
      <el-table :data="tableData" strip @selection-change="handleSelectionChange" style="background: linear-gradient(to top,white 0%,white 15%,#DCDCDC 85%,#DCDCDC 100%);">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
        <el-table-column label="头像">
          <template v-slot="scope">
            <div style="display: flex; align-items: center">
              <el-image style="width: 40px; height: 40px; border-radius: 50%" v-if="scope.row.avatar"
                        :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" plain @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin: 10px 0">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5,8,10,20]"
          layout="sizes, prev, pager, next,total,jumper"
          :total="total"
          @size-change="load"
          @current-change="load"
      >
      </el-pagination>
    </div>
    </div>   
    <!-- v-model:visible -->
    <el-dialog title="管理员" v-model="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8083/files/upload"
              list-type="picture"
              :on-success="handleAvatarSuccess"
          >    
            <el-button type="primary">上传头像</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <template v-slot:footer>
        <div  class="dialog-footer">
          <el-button @click="fromVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<style scoped>

  </style>
  